<template lang="pug">
  el-drawer.commonDrawer(
    title="摄像头"
    :visible="visibleDialog"
    append-to-body
    center
    destroy-on-close
    direction="rtl"
    size="720px"
    @close="$_handleCancel"
  )
    .drawer-content
      form-box(
        ref="form"
        :fields="fields"
        :showBtns="false"
        :layoutCol="{ xs: 24, md: 24, lg: 24 }"
        labelWidth="146px"
      )
    .drawer-footer.tr
      el-button.gradientVertical(size="large" :loading="submitting" @click="submitHandle" round) 提交
</template>
<script>
import { getInfo, addSubmit } from '../api'
import { getTeachAreas } from '@/api/common'

export default {
  props: {
    id: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      loading: false,
      submitting: false,
      teachAreas: [],
      info: {}
    }
  },
  computed: {
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    fields () {
      const { info, teachAreas } = this
      return [
        {
          key: 'name',
          label: '摄像头名称',
          rules: [{ required: true, message: '请输入' }],
          initialValue: info.name
        },
        {
          key: 'isActive',
          label: '是否对家长开放',
          type: 'radio',
          fieldProps: {
            options: [
              { id: '1', name: '是' },
              { id: '0', name: '否' }
            ]
          },
          rules: [{ required: true, message: '请输入' }],
          initialValue: info.active ? '1' : '0'
        },
        {
          key: 'teachingAreaId',
          label: '区域',
          type: 'select',
          rules: [{ required: true, message: '请选择' }],
          initialValue: info.teachingAreaId || '',
          fieldProps: {
            options: teachAreas,
            props: { value: 'id', label: 'name' }
          }
        },
        {
          key: 'url',
          label: '视频地址（HSL）',
          rules: [{ required: true, message: '请输入' }],
          fieldProps: {
            maxlength: 200
          },
          initialValue: info.url
        },
        // {
        //   key: 'status',
        //   label: '状态',
        //   type: 'select',
        //   rules: [{ required: true, message: '请选择' }],
        //   initialValue: info.status
        // },
        // {
        //   key: 'enabled',
        //   label: '对家长开放',
        //   type: 'radio',
        //   fieldProps: {
        //     options: [
        //       { value: '1', label: '是' },
        //       { value: '0', label: '否' }
        //     ]
        //   },
        //   rules: [{ required: true, message: '请选择' }],
        //   initialValue: info.enabled ? '1' : '0'
        // },
        {
          key: 'remark',
          label: '备注',
          type: 'textarea',
          initialValue: info.remark
        }
      ]
    }
  },
  watch: {
    visible (val) {
      if (val) {
        this.getInfo()
      }
    }
  },
  async created () {
    const teachArea = await getTeachAreas({ pageSize: 999, pageNum: 0 }) || {}
    this.teachAreas = teachArea.content || []
  },
  methods: {
    getInfo () {
      const { id } = this
      if (id) {
        this.loading = true
        getInfo({ roomId: id }).then(res => {
          this.info = res
        }).finally(() => {
          this.loading = false
        })
      } else {
        this.info = {}
      }
    },
    async submitHandle () {
      const { id } = this
      const values = await this.$refs.form.submitForm()
      console.log(values)
      this.submitting = true
      addSubmit({
        ...values,
        HDUrl: values.url,
        id
      }).then(() => {
        this.$emit('getList')
        this.$_handleCancel()
        this.$message.success('保存成功')
      }).finally(() => {
        this.submitting = false
      })
    },
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
